<template>
  <div>
    <table style="width: 100%" class="tab-table">
      <tr>
        <th scope="col" width="15%" align="left">
          <label>{{ $t("business.workload.volume") }}</label>
        </th>
        <th scope="col" width="15%" align="left">
          <label>{{ $t("business.workload.type") }}</label>
        </th>
        <th scope="col" width="28%" align="left">
          <label>{{ $t("business.workload.mount_point") }}</label>
        </th>
        <th scope="col" width="26%" align="left">
          <label>{{ $t("business.workload.sub_path_in_volume") }}</label>
        </th>
        <th scope="col" width="4%" align="left">
          <label>{{ $t("business.workload.read_only") }}</label>
        </th>
        <th align="left" />
      </tr>
      <tr v-for="(row, index) in volumeMounts" v-bind:key="index">
        <td>
          <ko-data-item
            v-model="row.name"
            item-ype="flatSelect"
            :selections="volumeNameList"
            @change="resetMountType(row)"
          />
        </td>
        <td>
          <ko-data-item v-model="row.type" itemType="input" disabled />
        </td>
        <td>
          <ko-data-item v-model="row.mountPath" itemType="input" />
        </td>
        <td>
          <ko-data-item v-model="row.subPath" itemType="input" />
        </td>
        <td>
          <el-checkbox v-model="row.readOnly" />
        </td>
        <td>
          <el-button
            type="text"
            style="font-size: 10px"
            @click="deleteMountInfo(index)"
          >
            {{ $t("commons.button.delete") }}
          </el-button>
        </td>
      </tr>
      <tr>
        <td align="left">
          <el-button @click="addMountInfo()">
            {{ $t("business.workload.add") }}
          </el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import { onMounted, reactive, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import {
  Container,
  Volume,
  VolumeMount,
  VolumeMountStatus
} from "../../../api/k8s";
import { VolumeSimpleInfo } from "./types";
import { isNotEmpty } from "../../../utils";
const { t } = useI18n();

type Prop = {
  volumeList?: VolumeSimpleInfo[];
  autoMerge?: boolean;
};
const props = withDefaults(defineProps<Prop>(), {
  autoMerge: true
});
const container = defineModel<Container>("container");

const volumeNameList = ref<string[]>([]);
const volumeMounts = ref<VolumeMount & Record<string, any>[]>([]);

const reloadVolumeNameList = () => {
  volumeNameList.value = props.volumeList?.map(v => v.name);
};

const resetMountType = (row: VolumeMount & Record<string, any>) => {
  const simple = props.volumeList?.find(v => v.name === row.name);
  if (simple) {
    row.type = simple.type;
  }
};

const onContainerChanged = () => {
  volumeMounts.value = Object.assign([], container.value.volumeMounts);
  for (const mount of volumeMounts.value) {
    resetMountType(mount);
  }
};

const deleteMountInfo = (index: number) => {
  volumeMounts.value.splice(index, 1);
  if (props.autoMerge) {
    container.value.volumeMounts.splice(index, 1);
  }
};

const addMountInfo = () => {
  const newMount = {
    name: "",
    mountPath: "",
    subPath: "",
    readOnly: false,
    type: ""
  };
  volumeMounts.value.push(newMount);
  if (props.autoMerge) {
    container.value.volumeMounts.push(newMount);
  }
};

const transformationToModel = () => {
  container.value.volumeMounts = volumeMounts.value
    .filter(v => isNotEmpty(v.name))
    .map(v => ({
      name: v.name,
      mountPath: v.mountPath,
      subPath: v.subPath,
      readOnly: v.readOnly
    }));
};

watch(
  () => props.volumeList,
  () => reloadVolumeNameList()
);

watch(
  () => container.value,
  () => onContainerChanged()
);

onMounted(() => {
  reloadVolumeNameList();
  onContainerChanged();
});

defineExpose({
  transformationToModel
});
</script>
